<template>
  <div>
    <p class="detailTop">
    	<span class="topD">·</span>
    	{{topText}}
    	<span class="topD">·</span>
    </p>
    <div class="chatBox">
      <p class="listTop clearfix">
        <span class="timeSpan topSpan">时间</span>
        <span class="nameSpan topSpan">姓名</span>
        <span class="textSpan topSpan">内容</span>
      </p>
      <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
	      <!--<mt-loadmore   :top-method="loadTop" :bottom-method="loadBottom"  ref="loadmore">-->
	      	<mt-loadmore   :top-method="loadTop" ref="loadmore">
		      <ul class="tableUl"
		      		v-if="!showTips"
		        	v-infinite-scroll="loadMore2"
		        	infinite-scroll-disabled="loading"
		        	infinite-scroll-distance="20"
		        	infinite-scroll-immediate-check = 'false'
		      	>
		      	
		      
		        <li
		          v-for="(item, index) in detailList"
		          class="clearfix showLi"
		          :class="item.id == textId ?'highLight':''"
		          :key="index"
		        >
		          <p class="timeSpan listSpan listTd">{{item.create_time | formatDate}}</p>
		          <p class="nameSpan listSpan listTd">{{item.sender}}</p>
		          <p class="textSpan listSpan listTd" v-if="item.media_mime == 'text'" @click="showAllText(item.content)">{{item.content}}</p>
		          <span class="textSpan listSpan listTd" v-else-if="item.media_mime=='image'">
		            	<img class="listImg" src="http://assets.rurushishi.com/activies/aiAssistant/chatImg.png" alt @click="showBigImg($event,item.content)">
		          </span>
		          <p class="textSpan listSpan listTd" v-else-if="item.media_mime=='audio'">
		            <audio :class="'playAudio audio_'+index" :src="item.content"></audio>
		            <span class="playImg" @click="playAudio(index)"></span>
		          </p>
		        </li>
		      </ul>
	      </mt-loadmore>
      </div>
    </div>
    <div class="bigImg" v-show="bigShow" @click="bigImgHide">
      <img :src="bigUrl" alt>
    </div>
    <!--<div class="allText" v-show="allTextShow">
    	
    </div>-->
  </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
import Cookies from "js-cookie";
import Qs from "qs";
export default {
  data() {
    return {
      openId: Cookies.get("openid"),
//openId: 'oj3y9wG78VUHc9lcn-f-nE60_NOM',
      textId: this.$route.query.id,
      topText: this.$route.query.name,
      detailList:[],
      showTips: false,
      bigShow: false,
      bigUrl: "",
      playSrc: "",
      wrapperHeight:0,
      pageNo: 1,
      pageNo2: 1,
      topId:0,
      bottomId:0,
      isShowLoadingIcon: true
    };
  },
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  mounted() {
		this.loadFirst();
  	this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
 	},
  methods: {
  	loadFirst(){
  		  let _self = this;
    		let query = {
                openId: _self.openId,
                id:_self.textId,
            }
    		axios.post(`${_self.global.API_AI_FORUM_URL}/assistant/messag/getMessageByGroup/?${Qs.stringify(query)}`,{

            	}).then(response => {
								console.log(response.list)
								_self.detailList = response.list;
								_self.topId = response.list[0].id;
								_self.bottomId = response.list[response.list.length-1].id
            })
  	},
    loadMore2() {
    	const _self = this;
      console.log(123);
      _self.loadBottomData()
    },
    //点击查看大图
    showBigImg(e,bigSrc) {
			console.log(bigSrc)
      this.bigShow = true;
			this.bigUrl =bigSrc
    },
    //大图蒙板隐藏
    bigImgHide() {
      this.bigShow = false;
    },
    //语音播放
    playAudio(index) {
      let currentAudioClassName = "audio_" + index;
      let audioList = document.getElementsByClassName("playAudio");
      Array.from(audioList).forEach(function(e) {
        if (e.className.indexOf(currentAudioClassName) > -1) {
        	console.log(e)
          //当前
          console.log(e.play);
          if (e.paused) {
            e.play();
          } else {
            e.pause();
            e.currentTime =0;
          }
        } else {
          e.pause();
          e.currentTime =0;
        }
      });
    },
    loadTop(){
    	const _self = this;
    	console.log('top');
    	_self.$refs.loadmore.onTopLoaded();
    	_self.loadTopData()
    },
       	loadTopData() {
	      const _self = this;
	      _self.loading = true;
	      _self.TopPage(_self.pageIndex).then(function(response) {
	      	console.log(response)
	        if (response.data.totalCount <= 0) {
//	          _self.showTips = true;
	          _self.loading = true;
	        } else {
	          _self.pageNo2++;
	          _self.showTips = false;
	          _self.loading = false;
	          _self.detailList =response.data.list.concat(_self.detailList);
	          console.log(_self.detailList)
	          if (
	            _self.detailList.length >= response.data.totalCount ||
	            _self.pageNo2 >= response.data.totalPage
	          ) {
	            //无更多数据
	            _self.loading = true;
	            _self.isShowLoadingIcon = false;
	          }
	        }
	      });
	  },
	  TopPage(pageNo2) {
	      	let _self = this;
	        let query = {
                openId: _self.openId,
                id:_self.topId,
                pageNo:_self.pageNo2
           }
	      return new Promise(function(resolve, reject) {
	        request
	          .post(
	            `${_self.global.API_AI_FORUM_URL}/assistant/messag/getMessageByDown/?${Qs.stringify(query)}`,
	            {}
	          )
	          .then(function(data) {
	          	console.log(data)
	            resolve(data);
	          });
	      });
	  },
	    loadBottomData() {
	      const _self = this;
	      _self.loading = true;
	      _self.BottomPage(_self.pageIndex).then(function(response) {
	      	console.log(response)
	        if (response.data.totalCount <= 0) {
//	          _self.showTips = true;
//	          _self.loading = true;
	        } else {
	          _self.pageNo++;
	          _self.showTips = false;
	          _self.loading = false;
	          _self.detailList = _self.detailList.concat(response.data.list);
	          if (
	            _self.detailList.length >= response.data.totalCount ||
	            _self.pageNo >= response.data.totalPage
	          ) {
	            //无更多数据
	            _self.loading = true;
	            _self.isShowLoadingIcon = false;
	          }
	        }
	      });
	    },
	    BottomPage(pageNo) {
	      	let _self = this;
	        let query = {
                openId: _self.openId,
                id:_self.bottomId,
                pageNo:_self.pageNo
           }
	      return new Promise(function(resolve, reject) {
	        request
	          .post(
	            `${_self.global.API_AI_FORUM_URL}/assistant/messag/getMessageByUp/?${Qs.stringify(query)}`,
	            {}
	          )
	          .then(function(data) {
	            resolve(data);
	          });
	      });
	    },
	    showAllText(text){
//	    	let _self = this;
//	    	alert(text)
	    	// console.log(text)
	    }
  }
};
</script>
<style lang="stylus" scoped>
.clearfix:after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.page-loadmore-wrapper {
    margin-top: -1px;
    overflow: scroll
}
.chatBox{
	width: 6.8rem;
	margin: 0 auto;
	font-size: .2rem;
}
.detailTop {
  height: 1.08rem;
  line-height: 1.08rem;
  width: 100%;
  text-align: center;
  font-size: 0.3rem;
}
.topD{
	font-weight: bolder;
	font-size: .3rem;
	color: #f5ad49;
}
.tableUl {
  display: table-row;
}

.listTop {
  text-align: center;
  display: flex;
  background: #f5ad49;
  height: .46rem;
  line-height: .46rem;
  color: white;
}

.showLi {
  display: flex;
  text-align: center;
}

.showLi:nth-child(odd) {
  background: white;
}

.showLi:nth-child(even) {
  background: #f5f5f5;
}

.highLight {
  background: salmon !important;
}

.topSpan {
  display: block;
  float: left;
  box-sizing: border-box;
  border-right: 2px solid white;
}
.topSpan:last-child{
	border: 0;
}
.listSpan {
  display: block;
  float: left;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-size: .22rem;
}

.timeSpan {
  width: 2rem;
  /* border-right: 1px solid #CACACA; */
}

.nameSpan {
  width: 2rem;
  /* border-right: 1px solid #CACACA; */
}

.textSpan {
  width: 2.8rem;
}

.listTd {
  min-height: 1rem;
  position: relative;
  overflow: hidden;
}

.listImg {
  width: 0.66rem;
  height: 0.66rem;
  display: block;
}

.bigImg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  line-height: 100%;
}

.bigImg img {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
}

audio {
  display: block !important;
  width: 100%;
  height: 100%;
  background: blue;
}

.playImg {
  width: 100%;
  height: 100%;
  background: url(http://assets.rurushishi.com/activies/aiAssistant/chatTalk.png) no-repeat center;
  background-size: .66rem .66rem;
  display: block;
}
</style>